<template>
	<div class="content">
	    <div class="cloud-header">
	      <h2 class="r-title-h2">轮播图管理</h2>
	    </div>
	    <!-- <div class="cloud-body">
			<Screen :list="search_config" :data="search_data"  @submit="onSearch"></Screen>
	    </div> -->
	    <div class="cloud-body">
	    	<div class="r-table">
		    	<div class="r-table-head">
		    		<div class="r-table-title"><i class="iconfont icon-menu1"></i>轮播图列表</div>
		    		<div class="r-table-button">
		    			<button class="h-btn h-btn-text-primary" @click="goAdd">新增轮播图</button>
		    			<button class="h-btn h-btn-text-primary" @click="goRec">回收站</button>
		    		</div>
		    	</div>
		    	
			    <Table :datas="datas" class="r-table-main" @select="onselect" :checkbox="checkbox" :stripe="stripe" :loading="loading" selectWhenClickTr>
			      <TableItem title="" prop="$serial" v-if="serial"></TableItem>
			      <TableItem title="轮播图名称" prop="title" :width="200"></TableItem>
			      <TableItem align="center" title="缩略图" :width="120">
		      	  	<div slot-scope="{data}" class="r-table-img">
	                	<img :src="data.image">
	              	</div>
			      </TableItem>
			      <TableItem title="状态">
			      	<div slot-scope="{data}">
			      		{{data.status == 1 ? '显示' : '隐藏'}}
			      	</div>
			      </TableItem>
			      <TableItem title="链接" :width="220">
			      	<div  slot-scope='{data}' class="r-adv-url">
			      		{{data.url}}
			      	</div>
			      </TableItem>
			      <TableItem title="排序号" align="center" prop="sort"></TableItem>
			      <TableItem title="添加时间" prop="creation_time" :width="180"></TableItem>
			      <TableItem title="操作" align="center" :width="160">
			      		<template slot-scope="{data}">
			      			<div class="r-item-action">
				      			<div @click="intEdit(datas, data)" class="r-action-button">编辑</div>
				      			<div @click="intRemove(datas, data)" class="r-action-button">加入回收站</div>
			      			</div>
			      		</template>
			      </TableItem>
			      <div slot="empty">还没有添加轮播图哦！</div>
			    </Table>
			    <div class="r-table-footer">
			    	<div><button @click="intRemove(datas,batch_val)" class="h-btn h-btn-no-border h-btn-text-blue">批量加入回收站</button></div>
			    </div>
			</div>
	    </div>
	</div>
</template>
<script type="text/javascript">
	//搜索组件
	import Screen from '@/components/screen'
	export default {

		name:"",
		data(){
			return {
				datatable_name:'banner',

				batch_val:[],
	            // 表格
				  show: false,
			      border: false,
			      stripe: false,
			      checkbox: true,
			      serial: false,
			      loading: true,
			      datas: []
			}
		},
	    components: {
	       Screen
	    },
	    mounted(){
	    	this.getList()
	    },
		methods:{
			/**
			 * 获取轮播广告
			 */
			async getList(){
				this.loading = true;
				let ret = await this.$cloud.name(this.datatable_name).where({deleted:1}).select();
				if(ret || ret.length == 0){
					this.datas = ret;
					this.loading = false;
				}else{
					this.$Message.error('网络异常，请稍后重试！')
					this.loading = false;
				}
			},

			/**
			 * 更新banner图
			 * @param  {[type]} datas [description]
			 * @param  {[type]} data  [description]
			 * @return {[type]}       [description]
			 */
		   	intEdit(datas,data){
		   		this.$router.push({
		   			path:'/advertising/addRChart',
		   			query:{id:data._id}
		   		})
		   	},

	    	async intRemove(datas, data) {
	    		let _id = [];
	    		if(Object.prototype.toString.call(data) == '[object Array]'){
			        if(data.length == 0){
			          this.$Message.error('请选中要加入回收站的轮播图！')
			          return false;
			        }
			        console.log('数据',data)
			        for(let key in data){
			          _id.push(data[key]['_id'])
			        }
		      	}else{
		        	_id.push(data._id);
		      	}

		      	let ret = this.$cloud.name(this.datatable_name).where({_id:['in',_id]}).update({deleted:0});
		      	if(ret){
		        	//重新获取数据
		        	await this.getList();
		        	this.$Message.success('加入回收站成功！');
		      	}else{
		        	this.$Message.error('网络异常，请稍后重试！')
		      	}
	        },
	        /**
	         * 选中的数据
	         * @return {[type]} [description]
	         */
	        onselect(data){
	        	this.batch_val = data;
	        },

		    currentChange(value) {
		      console.log(value);
		    },

		    /**
		     * 新增轮播图
		     * @return {[type]} [description]
		     */
		    goAdd(){
		    	this.$router.push({path:'/advertising/addRChart'})
		    },
		    goRec(){
				this.$router.push({path:'/advertising/rRecycleBin'})
		    }
		}
	}
</script>
<style type="text/css" lang="less" scoped="scoped">
	.cloud-header{
		margin-bottom: 20px;
	}
	.r-title-h2{
		border-left: solid 5px #2d7bf4;
		padding-left: 10px;
		margin-bottom: 0px !important;
	}
	.r-table{
		.r-table-head{
			border-bottom: solid 1px #efefef;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 20px;
			.r-table-title{
				color: #999;
				i{
					margin-right: 10px;
				}
			}
			.r-table-button{
				button{
					margin-left: 15px;
				}
				i{
					margin-right: 5px;
				}
			}
		}
		.r-table-main{
			border: none;
			th{
				background-color: #fff;	
			}
		}
		.r-adv-url{
			white-space:nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			-o-text-overflow:ellipsis;
		}
	    .r-table-img{
	      width: 80px;
	      height: 80px;
	      border:solid 1px #efefef;
		  margin: 0 auto !important;
	      display: flex;
	      justify-content: center;
	      align-items: center;
	      img{
	        width: auto; 
	        height: auto;
	        max-width: 100%;
	        max-height: 100%;
	      }
	    }
		.r-item-action{
			display: flex; 
			align-items: center; 
			justify-content: center;
			.r-action-button{
				margin: 0px 5px;
				color: #3788ee;
				cursor: pointer;
			}
			.r-action-button:active{
				color: #2677dd;
			}
		}
		.r-table-footer{
			display: flex;
			justify-content: space-between;
			align-items: center;
			align-items: center;
			padding-top: 20px;
			margin-top: 20px;
			border-top: 1px solid #eeeeee;
		}
	}

</style>
